<template>
    <div class="confirmation-wrapper">
      <top-bar :title="topTitle"></top-bar>
      <ul>
        <li v-for="(item,index) in selectList" :key="index">
          <div class="c-left" style="width: 75%">
            <h4>{{item.name}}</h4>
            <p>（第{{item.dose}}剂/共{{item.totaldose}}剂）<span class="nature">属性:{{item.type}}</span></p>
          </div>
          <div class="c-right" v-if="item.vprice==0||item.vprice==0.0">免费</div>
          <div class="c-right" v-else>{{item.vprice}}</div>
        </li>
      </ul>
      <div class="agree-check">
        <check-icon :value.sync="agreeCheck">同意<span class="book">《知情告知书》</span></check-icon>
      </div>
      <div class="footer">
        <span class="left">共{{selectList.length}}剂，
          <span class="pay-text">支付总额:</span>
          <span class="money">￥</span><span class="money-num">{{amount}}</span></span>
          <x-button class="pay-btn" :disabled="payDisabled" @click.native="pay">立即预约</x-button>
      </div>
    </div>
</template>

<script>
  import { CheckIcon,XButton } from 'vux';
  import TopBar from '@/components/top'

    export default {
      metaInfo () {
        return {
          title: '预约确认'
        }
      },
      data(){
        return {
          agreeCheck:false,
          topTitle:'预约确认',
          amount:null
        }
      },
      computed:{
        payDisabled(){
          if(this.agreeCheck==true){
            return false;
          }
          return true
        },
        selectList(){
          return JSON.parse(sessionStorage.getItem('selectList'));
        }
      },
      mounted(){
        for(let i in this.selectList){
          this.amount+=Number(this.selectList[i].vprice);
        }
      },
      methods:{
        pay(){
          let that=this;
          let formdata=JSON.parse(sessionStorage.getItem('formdata'));
          formdata.planid=formdata.planid.join(',');
          formdata.vacId=formdata.vacId.join(',');

          this.$api.post('/vaccinationReservation/generateOrder',formdata).then( (res)=> {
            if(res.data.result==0){
              that.$router.push({path: '/appointment'})
            }else{
              this.$vux.toast.text(res.data.msg, 'middle')
            }
          })
        }
      },
      components: {
        CheckIcon,
        XButton,
        TopBar
      },
      beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
        next();
      }
    }
</script>

<style lang="scss">
  .confirmation-wrapper{
    padding:10px 15px 70px;
    ul{
      li{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:15px;
        margin-bottom: 10px;
        display: flex;
        justify-content:space-between;
        .c-left{
          h4{
            font-size:15px;
            font-family:PingFang-SC-Regular;
            font-weight:normal;
            color:rgba(38,38,38,1);
          }
          p{
            font-size:12px;
            font-family:PingFang-SC-Regular;
            color:rgba(122,122,122,1);
            margin-top: 10px;
            .nature{
              margin-left: 30px;
            }
          }
        }
        .c-right{
          font-size:18px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(232,14,14,1);
          margin-top: 10px;
          span{
            font-size: 10px;
          }
        }
      }
    }
    .weui-btn_disabled.weui-btn_default{
      opacity: 0.7;
    }
    .agree-check{
      text-align: center;
      margin-top: 20px;
      font-size:14px;
      font-family:PingFang-SC-Regular;
      color:rgba(122,122,122,1);
      .book{
        color:#DA4A4A;
      }
      .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before{
        color:#DA4A4A;
      }
    }
    .footer{
      display: flex;
      justify-content:space-between;
      position: fixed;
      bottom: 0;
      left:0;
      right: 0;
      width:100%;
      height:54px;
      line-height: 54px;
      background:rgba(255,255,255,1);
      box-shadow:0px -1px 5px 0px rgba(50,51,51,0.08);
      .left{
        font-size:14px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(122,122,122,1);
        text-align: center;
        display: inline-block;
        flex: 1;
        .pay-text{
          color:#262626;
        }
        .money{
          color:#DA4A4A;
          font-size: 10px;
        }
        .money-num{
          color:#DA4A4A;
          font-size: 18px;
        }
      }
      .pay-btn{
        flex: 0 0 110px;
        background: #F56363;
        display: inline-block;
        text-align: center;
        font-size:14px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        border-radius:0;
      }
    }
  }
</style>
